/**
 * Creates the base structure of HtmlEditor field.
 * @member Ext.form.field.HtmlEditor
 */
@mixin extjs-form-htmleditor {
    .#{$prefix}html-editor-wrap {
        border: 1px solid $html-editor-border-color;

        .#{$prefix}toolbar {
            border-top-width: 0;
            border-left-width: 0;
            border-right-width: 0;
        }

        textarea {
            background-color: $html-editor-background-color;
        }
    }

    .#{$prefix}html-editor-tb .#{$prefix}btn-text {
        //background:transparent no-repeat;
        //background-image: theme-background-image($theme-name, 'glyphicons/glyphicons-halflings.png');
    }

    .#{$prefix}menu-item,
    .#{$prefix}html-editor-tb {

        span.#{$prefix}btn-icon {
            background-image: theme-background-image($theme-name, 'glyphicons/glyphicons-halflings.png');
        }

        .#{$prefix}edit-bold {
            // icon-bold
            background-position: -166px -47px;
        }
        .#{$prefix}edit-italic {
            // icon-italic
            background-position: -191px -47px;
        }
        // TODO: Find suitable icon
        .#{$prefix}edit-underline {
            // icon-text-width
            background-position: -239px -47px;
        }
        // TODO: Find icon
        .#{$prefix}edit-forecolor {
            background-position:-160px 0;
        }
        // TODO: Find icon
        .#{$prefix}edit-backcolor {
            background-position:-176px 0;
        }
        .#{$prefix}edit-justifyleft {
            // icon-align-left
            background-position: -263px -47px;
        }
        .#{$prefix}edit-justifycenter {
            // icon-align-center
            background-position: -287px -47px;
        }
        .#{$prefix}edit-justifyright {
            // icon-align-right
            background-position: -311px -47px;
        }
        .#{$prefix}edit-insertorderedlist {
            // icon-list
            background-position: -359px -47px;
        }
        .#{$prefix}edit-insertunorderedlist {
            // icon-list-alt
            background-position: -263px -23px;
        }
        .#{$prefix}edit-increasefontsize {
            // icon-arrow-up
            background-position: -288px -95px;
        }
        .#{$prefix}edit-decreasefontsize {
            // icon-arrow-down
            background-position: -311px -95px;
        }
        .#{$prefix}edit-sourceedit {
            // icon-edit
            background-position: -95px  -71px;
        }
        .#{$prefix}edit-createlink {
            // icon-globe
            background-position: -335px -143px;
        }
    }

    .#{$prefix}html-editor-tip .#{$prefix}tip-bd .#{$prefix}tip-bd-inner {
        padding: 5px;
        padding-bottom: 1px;
    }

    .#{$prefix}html-editor-tb {
        .#{$prefix}toolbar {
            position: static !important;
        }
        .#{$prefix}font-select {
            font-size: 11px;
        }
    }

    .#{$prefix}html-editor-wrap textarea {
        border: 0;
        padding: 3px 2px;
        overflow: auto;
    }
}